<template>
	<view class="container">
    <!-- 顶部搜索栏 -->
        <view class="search-box">
          <input type="text" placeholder="请输入加油站名称"  v-model="searchStationName"/>
		  <button @click="searchName">搜索</button>
          <view class="map-mode" @click="toNearRefuel">
            列表模式
          </view>
        </view>	
		
		<!-- 地图区域 -->
		<map
		  class="map"
		  :latitude="location.latitude"
		  :longitude="location.longitude"
		  :scale="scale"
		  :markers="markers"
		  show-location
		  @markertap="handleMarkerTap"
		></map>	
		
	    <!-- 信息区域 -->
	    <view class="info-section" v-if="index>=0">
	      <view class="content-wrapper">
	        <!-- 文字信息 -->
	        <view class="text-info">
	          <view class="station-name">
	            <text>{{nearbyStations[index].title}}</text>
	          </view>
	          <view class="station-address">
	            <text>{{nearbyStations[index].address}}</text>
	          </view>
	          <view class="store-detail" @click="toDetail">
	            <text class="detail-link">
	              <text class="info-icon">ⓘ</text>
	              门店详情 >>
	            </text>
	          </view>
	        </view>
	        <!-- 图片区域 -->
	        <view class="station-image">
	          <image 
	            src="/static/oil/竹莲加油站.png" 
	            mode="aspectFill"
	          ></image>
	        </view>
	      </view>
	    </view>
	    
	    <!-- 导航按钮 -->
	    <view class="nav-button" @click="openNavigation" v-if="index>=0">
	      <text>立即导航</text>
	    </view>	  
	
	   
			
	</view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../../../static/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
			//地图标记点
		      location: {
		        latitude: 39.909,
		        longitude: 116.39742
		      },
		      scale: 14,
		      markers: [],
		      nearbyStations: [] ,// 存储附近加油站数据
			  // 点击展示详情的id
			 index:-1,
			 //搜索内容
			 searchStationName:"加油站", 
			  
			}
		},
		methods: {
			// 跳转到列表模式
			toNearRefuel(){
				uni.redirectTo({
					url:"/pages/nearRefuel/nearRefuel"
				});
			},
			// 跳转到详情页
			toDetail(){
				uni.setStorageSync("station",this.nearbyStations[this.index])
				uni.navigateTo({
					url:"/pages/nearRefuel/detail/detail"
				})
			},
			// 跳转到导航页
			openNavigation(){
				 this.openNavigation();
			},
		
		
		    // 获取当前位置
		    getCurrentLocation() {
		      uni.getLocation({
		        type: 'gcj02',
		        success: res => {
		          this.location.latitude = res.latitude;
		          this.location.longitude = res.longitude;
		          // 获取到位置后搜索附近加油站
		          this.searchNearbyStations();
		        },
		        fail: err => {
		          uni.showToast({
		            title: '获取位置失败',
		            icon: 'none'
		          });
		        }
		      });
		    },
				
		    // 搜索附近加油站
		    searchNearbyStations() {
				var _this = this;
		      qqmapsdk.search({
		        keyword: _this.searchStationName,  // 搜索关键词
		        location: `${this.location.latitude},${this.location.longitude}`,
		        page_size: 10,  // 返回数据条数
		        page_index: 1,  // 页码
		        success: res => {
		          this.nearbyStations = res.data;
		          this.updateMarkers();
		        },
		        fail: err => {
		          uni.showToast({
		            title: '搜索加油站失败',
		            icon: 'none'
		          });
		        }
		      });
		    },
		
		    // 更新地图标记点
		    updateMarkers() {
		      this.markers = this.nearbyStations.map((station, index) => {
		        return {
		          id: index,
		          latitude: station.location.lat,
		          longitude: station.location.lng,
		          title: station.title,
		          width: 32,
		          height: 32,
		          callout: {
		            content: station.title,
		            color: '#000000',
		            fontSize: 14,
		            borderRadius: 4,
		            padding: 8,
		            display: 'ALWAYS'
		          },
		          // 可以自定义图标
		          // iconPath: '/static/marker.png'  // 确保有这个图片资源
		        }
		      });
		    },
		
		    // 点击标记点事件处理
		    handleMarkerTap(e) {
		      const marker = this.markers[e.markerId];
		      const station = this.nearbyStations[e.markerId];
			  this.index=e.markerId
		    },
			
		// 打开导航
		openNavigation() {
		  const station = this.nearbyStations[this.index];
		  uni.openLocation({
		    latitude: station.location.lat,
		    longitude: station.location.lng,
		    name: station.title,
		    address: station.address,
		    scale: 18
		  });
		},
			
		//点击搜索
		searchName(){
			this.searchNearbyStations()
		}
			
		},
		onLoad() {
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
			    key:"OFUBZ-SKY6H-2THDJ-WTCY3-GGQL3-DBFGN"
			});
		    // 获取当前位置
		    this.getCurrentLocation();	
		}
	}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}	
	
.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.search-box input {
  flex: 1;
  height: 70rpx;
  background: #fff;
  border-radius: 35rpx;
  padding: 0 30rpx;
}

.search-box button {
  height: 60rpx;
  background: #fff;
  line-height: 60rpx;
  padding: 0 10rpx;
  background-color: #223fff;
  border-radius: 16rpx;
  font-size: 28rpx;
  margin-left: 6rpx;
}

.map-mode {
  margin-left: 20rpx;
  color: #fff;
  background: #ff6b00;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
    font-size: 20rpx;
}

.map {
  width: 90%;
  height: 750rpx;
  transform: translateX(6%);
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.info-section {
  margin-bottom: 20rpx;
 margin-left: 40rpx;
 margin-right: 40rpx;

}

.content-wrapper {
  display: flex;
  justify-content: space-between;
   align-items: center;
  width: 100%;
}

.text-info {
  flex: 1;
 margin-right: 20rpx;
}

.station-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.station-address {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.store-detail {
  margin-top: 10rpx;
  width: 200rpx;
}

.detail-link {
  color: #007AFF;
  font-size: 26rpx;
}

.info-icon {
  margin-right: 6rpx;
}
.station-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  overflow: hidden;
  flex-shrink: 0;
}

.station-image image {
 width: 100% ;
   height: 100% ;
}

.nav-button {
  background-color: #007AFF;
  color: #fff;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 8rpx;
  font-size: 32rpx;
  margin-top: 20rpx;
}
</style>
